<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>题库专家后台管理系统</title>
  <!-- <link rel="stylesheet" href="assect/css/index.css"> -->
  <link rel="stylesheet" href="../assect/css/recharge.css">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <!-- <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- <script src="assect/js/pagination.js"></script> -->
  <!-- <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> -->
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <span>
      <div class="menu-icon"></div>
    </span>
    <p class="outLogin">退出登陆</p>
  </div>
  <!-- 侧边导航 -->
  <div id="canvas-warp">
    <div class="nav">
      <ul class="nav-ul">
        <li class="nav-font">
          <p>激活码管理</p>
          <ul class="son-nav">
            <a href="buy.html">
              <li>激活码购买</li>
            </a>
            <a href="use.html">
              <li>激活码使用</li>
            </a>
            <a href="../index.html">
              <li>取码记录</li>
            </a><a href="buyRecord.html">
              <li>购买记录</li>
            </a><a href="#">
              <li>账户充值</li>
            </a><a href="RechargeRecord.html">
              <li>充值记录</li>
            </a>
          </ul>
        </li>
      </ul>
    </div>
    <div class="mask"></div>
  </div>
  <!-- 内容区域 -->
  <div class="content">
    <div class="content-box">
      <div class="title">账户充值</div>
      <div class="content-box-con">
        <!-- 付款方式 -->
        <div>
          <span>付款方式</span>
          <!-- <input type="text" placeholder="激活的账号"> -->
          <p>
            <input type="radio" name="buy">支付宝
            <input type="radio" name="buy">微信
          </p>
        </div>
        <!-- 付款二维码 -->
        <div>
          <span>付款二维码</span>
          <p><img src="../assect/img/alibaba.jpg" alt=""></p>
        </div>
        <!-- 您当前账户余额 -->
        <div>
          <span>您当前账户余额</span>
          <p>2998.09</p>
        </div>
        <!-- 充值金额 -->
        <div>
          <span>充值金额</span>
          <p><input type="text" placeholder="充值金额" class="tian"></p>
        </div>
        <!-- 付款账号及姓名 -->
        <div>
          <span>付款账号及姓名</span>
          <p><input type="text" placeholder="付款账号及姓名" class="tian"></p>
        </div>
      </div>

      <div class="content-box-btn">
        <button>确定</button>
      </div>
    </div>
  </div>
  <script>
    $(function () {
      $('#canvas-warp').hide();
      $('.son-nav').show();
      // 点击图标，显示导航
      $('.menu-icon').click(function () {
        $('#canvas-warp').toggle(300);
      })
      // 点击遮罩，隐藏导航
      $('.mask').click(function () {
        $('#canvas-warp').toggle(300);
      })
      $('.nav-font').click(function (event) {
        $(this).children('.son-nav').toggle(300);
        $(this).siblings().children('.son-nav').hide(300);
      });
      // 跳转生成激活码
      $('#createCode').click(function () {
        $(location).attr('href', 'pages/createCode.html');
      })
      // 跳转激活码导出
      $('#exportCode').click(function () {
        $(location).attr('href', 'pages/exportCode.html');
      })

      // 退出登陆
      $('.outLogin').click(function () {
        $(location).attr('href', '../login.html');
      })
    })



  </script>
</body>

</html>